<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>item_type_index</title>

    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/myconfig/layui/layui.js}"></script>

    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{/myconfig/layui/css/layui.css}" type="text/css" rel="stylesheet" media="all">
</head>
<body>

<h3>事项类型管理</h3>
<!-- 模态框（Modal） -->
<!-- 添加 事项类型 -->
<div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel">
                    类型添加
                </h3>
            </div>
            <div class="modal-body">
                <form id="addItemForm">
                    <div style="height: 100%;width: 100%">
                        <div style="width:100%;height: 20%;">
                            <div style="width:30%;height:90%;float:left;">
                                事项类型： <textarea id="itemTypeName" class="form-control" rows="1%" cols="40%"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="insert()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 修改 事项类型 -->
<div class="modal fade" id="updateSxType" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel2">
                    类型修改
                </h3>
            </div>
            <div class="modal-body">
                <form id="updateSxTypeForm">
                    <div style="height: 100%;width: 100%">
                        <div style="width:100%;height: 20%;">
                            <div style="width:30%;height:90%;float:left;">
                                事项类型： <textarea id="itemTypeName2" class="form-control" rows="1%" cols="40%"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!-- 数据表格 -->
<table class="layui-hide" id="listItems" lay-filter="items"></table>

<!-- 头部工具栏 -->
<script type="text/html" id="listItemsToolbar">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" data-toggle="modal" data-target="#addItemModal" shiro:hasPermission="SyType_insert">
            <span class="layui-icon layui-icon-add-1">&nbsp;添加</span>
        </button>

        <button class="layui-btn layui-btn-sm" lay-event="deleteType" shiro:hasPermission="SyType_delete">
            <span class="layui-icon layui-icon-delete">&nbsp;删除</span>
        </button>

        <button class="layui-btn layui-btn-sm" lay-event="update" shiro:hasPermission="SyType_update">
            <span class="layui-icon layui-icon-edit">&nbsp;修改</span>
        </button>
    </div>
</script>

<input type="hidden" id="updateTypeId" value="-1">

<script th:inline="none">
    /* 分页查看所有区级事项 */
    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.$;
        $.ajax({
            type: "get",
            url: "SxType/selAll", // 数据接口
            success: function (result) {
                var data = result.data;
                table.render({
                    id:'items',
                    elem: '#listItems',
                    title:'事务类型表',
                    toolbar: '#listItemsToolbar',
                    data: data,
                    height: 520,
                    cols: [[
                        {type: 'radio',width: '5%'}
                        , {field: 'itemTypeId', title: 'ID', sort: true, width: '48%', align: 'center'}
                        , {field: 'itemTypeName', title: '事务类型', width: '48%', align: 'center'}
                    ]],
                    page: true, //是否显示分页
                    limits: [5, 10, 15,20], //每页显示个数
                    limit: 10, //每页默认显示的数量
                    group:5   //页码最多显示个数
                });
            }
        });





        /* 工具栏监听事件 */
        table.on('toolbar(items)', function(obj){     //items 为table表的ID
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
                /* 删除一个事项 */
                case 'deleteType':
                    if(checkStatus.data != ""){
                        var data = checkStatus.data[0].itemTypeId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                        var itemTypeId = JSON.stringify(data);
                        deleteType(itemTypeId);
                    }
                    break;


                /* 编辑修改事项 */
                case 'update':
                    if(checkStatus.data != "") {
                        var data = checkStatus.data[0].itemTypeId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                        var itemTypeId = JSON.stringify(data);
                        $("#updateTypeId").text(itemTypeId);
                        $("#updateSxType").modal("show");
                    }
                    break;
            };
        });


    });
</script>

<script>
    /* 添加一个事项类型 */
    function insert() {
        var itemTypeName = $("#itemTypeName").val();
        if(itemTypeName == "") {
            alert("事项类型不能为空!");
        }else{
            $.ajax({
                url:"SxType/insert",
                type:"post",
                data:{
                    "itemTypeName":itemTypeName
                },
                success:function (result) {
                    if(result == "success"){
                        alert("类型添加成功！");
                        document.getElementById("addItemForm").reset();
                        $("#addItemModal").modal("hide");
                        location.reload();
                    }else {
                        alert("类型添加失败！");
                    }
                }
            });
        }
    }

    /* 编辑修改事项 */
    function update(itemTypeId) {
        var itemTypeId = $("#updateTypeId").text();
        var itemTypeName = $("#itemTypeName2").val();

        if(itemTypeName == "") {
            alert("事项类型不能为空!");
        }else{
            $.ajax({
                url:"SxType/update",
                type:"post",
                data:{
                    "itemTypeId":itemTypeId,
                    "itemTypeName":itemTypeName
                },
                success:function (result) {
                    if(result == "success"){
                        alert("类型修改成功！");
                        document.getElementById("updateSxTypeForm").reset();
                        $("#updateSxType").modal("hide");
                        location.reload();
                    }else {
                        alert("类型修改失败！");
                    }
                }
            });
        }
    }

    /* 删除一个事项 */
    function deleteType(itemTypeId) {
        layui.use('table',function () {
            var $ = layui.$;
            $.ajax({
                url:"SxType/delete",
                type:"post",
                data:{
                    "itemTypeId":itemTypeId
                },
                success:function (result) {
                    if (result == "success") {
                        alert("删除事项成功!");
                        location.reload();
                    }else {
                        alert("删除事项失败！");
                    }
                }
            });
        })
    }


</script>

</body>
</html>